<template>
  <div class="content">
    <div id="components-form-demo-advanced-search">
    <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch">
       <a-row>
        <a-col :span="5">
          <a-form-item label="内容" >
            <a-input placeholder="" v-model="selectForm.content" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="审核状态" >
            <a-select style="width:220px" v-model="selectForm.verify">
              <a-select-option value="">全部状态</a-select-option>
              <a-select-option value="0">待审核</a-select-option>
              <a-select-option value="1">通过</a-select-option>
              <a-select-option value="2">失败</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="发送状态" >
            <a-select style="width:220px" v-model="selectForm.status">
              <a-select-option value="">全部状态</a-select-option>
              <a-select-option :value="0">待审核</a-select-option>
              <a-select-option :value="1">待发送</a-select-option>
              <a-select-option :value="2">发送成功</a-select-option>
              <a-select-option :value="3">发送失败</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="短信类型" >
            <a-select style="width:220px" v-model="selectForm.type">
              <a-select-option value="">全部状态</a-select-option>
              <a-select-option :value="1">平台短信</a-select-option>
              <a-select-option :value="2">接口短信</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="开始时间" >
             <a-date-picker v-model="selectForm.startTime" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="结束时间" >
             <a-date-picker v-model="selectForm.endTime" />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="扩展码" >
            <a-input placeholder="" v-model="selectForm.extnum" />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-space>
            <a-button type="primary" icon="search" @click="query">查询</a-button>
            <a-button style="background: #b38c01; color: #fff" type="primary" icon="reload" @click="reset">重置</a-button>
            <a-button type="primary" icon="search" @click="BatchAudit" v-if="isShow">批量审核</a-button>
          </a-space>
        </a-col>
        </a-row>
    </a-form>
    <div style="padding:20px;">
        <a-table :data-source="table.list" class="tableStyle" :row-selection="rowSelection" :pagination="pagination" @change="handleTableChange">
            <!-- <a-table-column title="序号" data-index="num" /> -->
            <a-table-column title="提交时间" data-index="ctime" />
            <a-table-column title="扩展码" data-index="extnum" />
            <a-table-column title="提交内容" data-index="content" />
            <a-table-column title="电话号码" data-index="phone" />
            <a-table-column title="短信类型">
              <template slot-scope="record">
                <span>{{record.type=='1'?'平台短信':'接口短信'}}</span>
              </template>
            </a-table-column>
            <a-table-column title="短信状态">
              <template slot-scope="record">
                <span>{{record.status=='0'?'待审核':record.status=='1'?'待发送':record.status=='2'?'发送成功':'发送失败'}}</span>
              </template>
            </a-table-column>
            <a-table-column title="审核状态">
              <template slot-scope="record">
                <span >{{record.verify=='0'?'待审核':record.verify=='1'?'已通过':'失败'}}</span>
              </template>
            </a-table-column>
            
            <a-table-column title="操作">
              <template slot-scope="record">
                <a-space>
                  <a-button type="primary" v-if="record.verify==0 && isShow" @click="adopt(record,1)">通过</a-button>
                  <a-popconfirm
                    title="您确定拒绝审核此短信吗?"
                    ok-text="确定"
                    cancel-text="取消"
                    v-if="record.verify==0 && isShow"
                    @confirm="adopt(record,2)"
                    @cancel="cancel"
                  >
                    <a-button type="danger">拒绝</a-button>
                  </a-popconfirm>
                  <a-button type="primary" @click="showModal(record)" v-if="record.reply!=null">查看回复</a-button>
                </a-space>
              </template>
            </a-table-column>
        </a-table>
    </div>
  </div>
  <a-modal
      title="回复"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p>{{reply}}</p>
    </a-modal>
  </div>
</template>

<script>
import { getSmsList,verifySms} from '@/api/SMSRelated'
  export default {
    name: "SMSAudit",
    data() {
      return {
        expand: false,
        form: this.$form.createForm(this, { name: 'advanced_search' }),
        table:{
          list:[],
        },
        selectForm:{
          content:'',
          verify:'',
          startTime:'',
          endTime:'',
          status:'',
          type:'',
          extnum:''
        },
        pagination: {
          current:1,
          pageSize:10,
          total:0,
        },
        shortLetterList:[],
        userInfo: {},
        selectedRowsInfo:[],
        visible: false,
        confirmLoading: false,
        reply:'',
        isShow:false,
      }
    },
    created() {
      this.userInfo = JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value
      if(this.userInfo.id=='1475655695776423937'||this.userInfo.id=='e9ca23d68d884d4ebb19d07889727dae'){
        this.isShow=true
      }
      this.getShortLetterList()
    },

    computed: {
      rowSelection() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            this.selectedRowsInfo=selectedRows
          },
          getCheckboxProps: record => ({
            props: {
              disabled:record.verify!='0',
            },
          }),
        };
      },

    },

    
    methods: {
      showModal(record) {
        this.reply=record.reply
        this.visible = true;
    },
    handleOk(e) {
      this.confirmLoading = true;
        this.visible = false;
    },
    handleCancel(e) {
      this.visible = false;
    },
      getShortLetterList(){
        getSmsList({
          userId:this.userInfo.id,
          content:this.selectForm.content,
          verify:this.selectForm.verify,
          startTime:this.selectForm.startTime,
          endTime:this.selectForm.endTime,
          status:this.selectForm.status,
          type:this.selectForm.type,
          extnum:this.selectForm.extnum,
          page:this.pagination.current,
          size:this.pagination.pageSize,
        }).then(data=>{
          if(data.success){
            this.table.list=data.result.data
            this.pagination.total=data.result.totalCount
          }
        })
      },

      query(){
        this.pagination.current=1
        this.getShortLetterList()
      },

    handleTableChange(pagination, filters, sorter) {
      this.pagination.current=pagination.current
      this.pagination.pageSize=pagination.pageSize
      this.getShortLetterList()
    },
    reset(){
      this.selectForm.content=''
      this.selectForm.verify=''
      this.selectForm.startTime=''
      this.selectForm.endTime=''
      this.selectForm.status=''
      this.selectForm.type=''
      this.getShortLetterList()
    },
      
      handleSearch(e) {
        e.preventDefault();
        this.form.validateFields((error, values) => {
          console.log('error', error);
          console.log('Received values of form: ', values);
        });
      },

      handleReset() {
        this.form.resetFields();
      },

      toggle() {
        this.expand = !this.expand;
      },

      adopt(record,status){
        verifySms({idList:[record.id],status:status}).then(data=>{
          if(status==1){
            if(data.success){
              this.$message.success('短信已通过！')
              this.getShortLetterList()
            }
          }else{
            if(data.success){
              this.$message.success('短信已拒绝！')
              this.getShortLetterList()
            }
          }
          
        })
      },
      BatchAudit(){
        console.log(this.selectedRowsInfo)
        let idLists=[]
        this.selectedRowsInfo.forEach(element => {
          idLists.push(element.id)
        });
        console.log(idLists)
        verifySms({idList:idLists,status:1}).then(data=>{
          if(data.success){
              this.$message.success('短信批量审核通过！')
              this.getShortLetterList()
            }
        })
      },


      cancel(){
        this.$message.success('已取消审核！')
      },
      confirm(){}
    }
  }
</script>
<style scoped>
.content{
  width:100%;
  height: 100%;
  background-color:#01232c !important;
}
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}
</style>